<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>

		<title>Supervisor</title>

		<link rel="icon" type="image/x-icon" href="/res/favicon.ico">
		<link rel="stylesheet" type="text/css" href="/res/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="/res/css/fontawesome.min.css">

		<script src="/res/js/jquery.min.js"></script>
		<script src="/res/js/bootstrap.min.js"></script>

		<style type="text/css">
			html, body { height: 100%; width: 100%; }
			
			.topbar {
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				height: 40px;
			}

			.mainblock {
				position: fixed;
				left: 0px;
				right: 0px;
				top: 40px;
				bottom: 64px;
				overflow: auto;
			}

			.footer {
				position: fixed;
				left: 0px;
				right: 0px;
				height: 64px;
				bottom: 0px;
			}
		</style>
	</head>
	<body>
		<div class="topbar">
			<nav class="navbar navbar-expand-sm navbar-dark bg-dark p-0">
				<div class="container">
					<a class="navbar-brand" href="#">
						<i class="fa fa-eye mr-2"></i>Supervisor
					</a>

					<ul class="navbar-nav">
						<li class="nav-item">
							<a class="nav-link" href="#" onclick="return $('#mdl-add').modal('toggle');"><i class="fa fa-plus mr-1"></i>添加命令</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#" onclick="return reload();"><i class="fa fa-refresh mr-1"></i>重载配置</a>
						</li>
					</ul>

					<span class="navbar-text ml-auto">
						WEB版进程管理工具
					</span>
				</div>
			</nav>
		</div>
		
		<div class="mainblock">
			<div class="container mt-4">
				<div id="conn-err"></div>
				
				<table class="table table-sm table-hover shadow">
					<thead class="table-secondary">
						<tr>
							<th>命令名</th>
							<th>状态</th>
							<th>PID</th>
							<th>CPU(%)</th>
							<th>VSZ(KB)</th>
							<th>RSS(KB)</th>
							<th>启动时间</th>
							<th>操作</th>
							<th>变更</th>
						</tr>
					</thead>
					<tbody id="table-watchers">
						
					</tbody>
				</table>

				<pre id="tail_all" class="border p-2" style="min-height: 250px; max-height: 300px; overflow: auto;"></pre>
			</div>
		</div>	
	
		<div class="footer bg-dark text-secondary text-center pt-2">
			<p class="m-0">使用 <a class="text-info" href="https://github.com/cesanta/mongoose">Mongoose</a> 编写HTTP/WebSocket底层服务。源代码仓库地址 <a class="text-info" href="https://git.oschina.net/love_linger/supervisor">leo/supervisor</a>.</p>
			<p><small><i>Copyright(c) longshuang@msn.cn 2015-2016. All rights reserved.</i></small></p>
		</div>

		<div id="mdl-add" class="modal" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header py-1">
						<h5 class="modal-title">添加命令</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					</div>

					<div class="modal-body">
						<div id="err"></div>

						<form id="form-add">
							<div class="form-group row">
								<label for="in-name" class="col-3 col-form-label">命令名</label>
								<div class="col-9">
									<input type="text" class="form-control" id="in-name" placeholder="ID，英文数字下划线组，不能出现空格">
								</div>								
							</div>

							<div class="form-group row">
								<label for="in-cmd" class="col-3 col-form-label">命令</label>
								<div class="col-9">
									<input type="text" class="form-control" id="in-cmd" placeholder="Shell命令">
								</div>
							</div>

							<div class="form-group row">
								<label for="in-dir" class="col-3 col-form-label">运行目录</label>
								<div class="col-9">
									<input type="text" class="form-control" id="in-dir" placeholder="运行目录，选填，默认根目录/">
								</div>
							</div>

							<div class="form-group row">
								<label for="in-retry" class="col-6 col-form-label">意外挂起后，尝试拉起次数</label>
								<div class="col-2 offset-4">
									<input type="number" class="form-control" id="in-retry" name="retry" value="0">
								</div>
							</div>
						</form>
					</div>

					<div class="modal-footer py-1">
						<button type="button" class="btn btn-sm btn-primary" onclick="add_watcher()">确认添加</button>
					</div>
				</div>
			</div>
		</div>

		<div id="mdl-edit" class="modal" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header py-1">
						<h5 class="modal-title">修改命令</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					</div>

					<div class="modal-body">
						<div id="err"></div>

						<form id="form-edit">
							<input type="text" id="org-name" hidden>

							<div class="form-group row">
								<label for="in-name" class="col-3 col-form-label">命令名</label>
								<div class="col-9">
									<input type="text" class="form-control" id="in-name" placeholder="ID，英文数字下划线组，不能出现空格">
								</div>								
							</div>

							<div class="form-group row">
								<label for="in-cmd" class="col-3 col-form-label">命令</label>
								<div class="col-9">
									<input type="text" class="form-control" id="in-cmd" placeholder="Shell命令">
								</div>
							</div>

							<div class="form-group row">
								<label for="in-dir" class="col-3 col-form-label">运行目录</label>
								<div class="col-9">
									<input type="text" class="form-control" id="in-dir" placeholder="运行目录，选填，默认根目录/">
								</div>
							</div>

							<div class="form-group row">
								<label for="in-retry" class="col-6 col-form-label">意外挂起后，尝试拉起次数</label>
								<div class="col-2 offset-4">
									<input type="number" class="form-control" id="in-retry" name="retry" value="0">
								</div>
							</div>
						</form>
					</div>

					<div class="modal-footer py-1">
						<button type="button" class="btn btn-primary" onclick="edit_watcher()">确认修改</button>
					</div>
				</div>
			</div>
		</div>

		<div id="mdl-tail" class="modal" tabindex="-1" role="dialog">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header py-1">
						<h5 class="modal-title">日志，仅保留最近的8K</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					</div>

					<div class="modal-body">
						<pre class="border p-2" style="height: 40em">
						</pre>

						<div class="checkbox text-right">
							<label>
								<input type="checkbox" id="enable_follow"> 自动翻页
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="/res/js/supervisor.js"></script>
	</body>
</html>
